import { graphql } from 'gatsby';

import Callout from '../../components/Callout';
import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';

import Basic from '../../examples/Accordion/Basic';
import AllCollapse from '../../examples/Accordion/AllCollapse';
import Flush from '../../examples/Accordion/Flush';
import AlwaysOpen from '../../examples/Accordion/AlwaysOpen';
import CustomToggle from '../../examples/Accordion/CustomToggle.js';
import ContextAwareToggle from '../../examples/Accordion/ContextAwareToggle.js';

# Accordion

<p className="lead">
  Build vertically collapsing accordions in combination with the Collapse
  component.
</p>

## Examples

Click the accordions below to expand/collapse the accordion content.

### Basic Example

<ReactPlayground codeText={Basic} />

### Fully Collapsed State

If you want your `Accordion` to start in a fully-collapsed state, then simply don't pass in a `defaultActiveKey` prop to `Accordion`.

<ReactPlayground codeText={AllCollapse} />

### Flush

Add `flush` to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

<ReactPlayground codeText={Flush} />

### Always open

You can make accordion items stay open when another item is opened by using the `alwaysOpen` prop. If you're looking to
control the component, you must use an array of strings for `activeKey` or `defaultActiveKey`.

<ReactPlayground codeText={AlwaysOpen} />

## Custom Accordions

You can still create card-based accordions like those in Bootstrap 4. You can hook 
into the Accordion toggle functionality via `useAccordionButton` to make custom
toggle components.

### Custom Toggle

<ReactPlayground codeText={CustomToggle} />

### Custom Toggle with Expansion Awareness

You may wish to have different styles for the toggle if it's associated section is expanded,
this can be achieved with a custom toggle that is context aware and also takes advantage of the `useAccordionButton` hook.

<ReactPlayground codeText={ContextAwareToggle} />

## API

<ComponentApi metadata={props.data.Accordion} />
<ComponentApi
  metadata={props.data.AccordionItem}
  exportedBy={props.data.Accordion}
/>
<ComponentApi
  metadata={props.data.AccordionHeader}
  exportedBy={props.data.Accordion}
/>
<ComponentApi
  metadata={props.data.AccordionBody}
  exportedBy={props.data.Accordion}
/>
<ComponentApi
  metadata={props.data.AccordionButton}
  exportedBy={props.data.Accordion}
/>
<ComponentApi
  metadata={props.data.AccordionCollapse}
  exportedBy={props.data.Accordion}
/>

### useAccordionButton

```js
import { useAccordionButton } from 'react-bootstrap/AccordionButton';

const decoratedOnClick = useAccordionButton(eventKey, onClick);
```

export const query = graphql`
  query AccordionQuery {
    Accordion: componentMetadata(displayName: { eq: "Accordion" }) {
      ...ComponentApi_metadata
    }
    AccordionItem: componentMetadata(displayName: { eq: "AccordionItem" }) {
      ...ComponentApi_metadata
    }
    AccordionHeader: componentMetadata(displayName: { eq: "AccordionHeader" }) {
      ...ComponentApi_metadata
    }
    AccordionBody: componentMetadata(displayName: { eq: "AccordionBody" }) {
      ...ComponentApi_metadata
    }
    AccordionButton: componentMetadata(displayName: { eq: "AccordionButton" }) {
      ...ComponentApi_metadata
    }
    AccordionCollapse: componentMetadata(
      displayName: { eq: "AccordionCollapse" }
    ) {
      ...ComponentApi_metadata
    }
  }
`;
